<template>
  <div class="warn-table">
    <div class="header">
      <div class="title">预警事件列表</div>
      <div id="icon">
        <i class="el-icon-error" @click="close"></i>
      </div>
    </div>
    <div class="footer">
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
      >
        <el-table-column
          label="预警"
          style="width:10%;">
          <template slot-scope="scope">
            <i>图标{{scope.row.warn}}</i>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="人员"
          style="width:10%;">
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          style="width:10%;"
        >
        </el-table-column>
        <el-table-column
          prop="warnDate"
          label="预警时间"
          style="width:45%;"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          style="width:25%;"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          warn: "1", // 预警
          name: "张三", // 人员
          type: "聚集", // 类型
          warnDate: "2020-8-14 17:39:34", // 预警时间
          address: "天马小区" // 采集地点
        },
        {
          warn: "2", // 预警
          name: "张三", // 人员
          type: "聚集", // 类型
          warnDate: "2020-8-14 17:39:34", // 预警时间
          address: "天马小区" // 采集地点
        },
        {
          warn: "1", // 预警
          name: "张三", // 人员
          type: "聚集", // 类型
          warnDate: "2020-8-14 17:39:34", // 预警时间
          address: "天马小区" // 采集地点
        },
        {
          warn: "1", // 预警
          name: "张三", // 人员
          type: "聚集", // 类型
          warnDate: "2020-8-14 17:39:34", // 预警时间
          address: "天马小区" // 采集地点
        }
      ]
    }
  },
  methods: {
    close() {
      console.log(123)
      this.$emit("close",true)
    }
  }
}
</script>

<style lang="scss">
  .warn-table {
    .header {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 15px 0px;
      .title {
        color: white;
      }
      #icon {
        color: white;
        i {
          font-size: 24px;
          color: skyblue;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .footer {
      .el-table .el-table__header-wrapper th {
        background: skyblue;
        color: white;
      }
      .el-table__body-wrapper {
        .el-table__row {
          background: #696969;
          color: white;
          &:hover {
            td {
              background: #696969;
            }
          }
        }
        .el-table__row--striped {
          // background: #B0C4DE !important;
          td {
            color: white;
            background-color: #B0C4DE;
          }
          &:hover {
            td {
              background: #B0C4DE;
            }
          }
        }


      }

    }
  }
</style>